import React, { PureComponent } from 'react'
import { Form, Input, Button } from 'antd-mobile'
import Header from "../../components/Header/Header"
import { connect } from 'react-redux'
import { actions, getUser } from '../../store/modules/register'
import { bindActionCreators } from 'redux'

class Register extends PureComponent {
  render() {
    let {r:{changeUser,doRegister},history:{push}} = this.props
    return (
      <div>
        <Header title="注册"></Header>
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='userphone'>
            <Input placeholder='请输入手机号' clearable onChange={(v) => changeUser("phone",v)} />
          </Form.Item>
          <Form.Item label='用户名' name='nickname'>
            <Input placeholder='请输入用户名' clearable onChange={(v) => changeUser("nickname",v)} />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password' onChange={(v) => changeUser("password",v)} />
          </Form.Item>
        </Form>
        <p style={{textAlign:'center'}}>
          <Button color='warning' size='middle' onClick={() => doRegister(push)}>注册</Button>
        </p>
      </div>
    )
  }
}

const mapStateToProps = (state) =>{
  return {
    user:getUser(state)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    r:bindActionCreators(actions,dispatch)
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Register)